feat(prefer-use-template-ref): add support for fix option #2632
Conversation
There was a problem hiding this comment.
Can you please add an test case using TypeScript?
<template>
<div ref="root" />
</template>
<script setup lang="ts">
import { ref } from 'vue';
const root = ref<HTMLDivElement>();
</script>should get autofixed to
<template>
<div ref="root" />
</template>
<script setup lang="ts">
import { ref,useTemplateRef } from 'vue';
const root = useTemplateRef<HTMLDivElement>('root');
</script>Note that you'll need to specify the parser in the test:
languageOptions: {
parserOptions: {
parser: require.resolve('@typescript-eslint/parser')
}
},There was a problem hiding this comment.
Sorry for the late response, I added the test but I am not sure about keeping the generic type parameter. I see as one of the main benefits of useTemplateRef function that you don't have to use the type parameters because the Vue Language Server would create it for you. With ref you did not have other option but to manually define it. Wouldn't it be better for the users to automatically get rid of it?
lib/rules/prefer-use-template-ref.js
Outdated
| const lastImportSpecifier = importSpecifiers[importSpecifiers.length - 1] | ||
|
|
||
| // @ts-ignore | ||
| return fixer.insertTextAfter(lastImportSpecifier, `,useTemplateRef`) |
There was a problem hiding this comment.
| return fixer.insertTextAfter(lastImportSpecifier, `,useTemplateRef`) | |
| return fixer.insertTextAfter(lastImportSpecifier, `, useTemplateRef`) |
lib/rules/prefer-use-template-ref.js
Outdated
| const body = sourceCode.ast.body | ||
|
|
||
| const imports = body.filter((node) => node.type === 'ImportDeclaration') |
There was a problem hiding this comment.
| const body = sourceCode.ast.body | |
| const imports = body.filter((node) => node.type === 'ImportDeclaration') | |
| const body = sourceCode.ast.body | |
| const imports = body.filter((node) => node.type === 'ImportDeclaration') |
lib/rules/prefer-use-template-ref.js
Outdated
| const lastImport = imports[imports.length - 1] | ||
|
|
||
| const importStatement = "import {useTemplateRef} from 'vue';" |
There was a problem hiding this comment.
- Let's put the
importStatementvariable first because it's used in both following branches. - Remove the empty line to make it a little more concise.
- Add spaces between the braces in the added code, to conform with the common Prettier style. (If users don't like it, they can and have to change it either way.)
| const lastImport = imports[imports.length - 1] | |
| const importStatement = "import {useTemplateRef} from 'vue';" | |
| const importStatement = "import { useTemplateRef } from 'vue';" | |
| const lastImport = imports[imports.length - 1] |
lib/rules/prefer-use-template-ref.js
Outdated
| /** @type {Fix[]} */ | ||
| const fixes = [] | ||
|
|
||
| const replaceFunctionFix = fixer.replaceText( | ||
| scriptRef.node, | ||
| `useTemplateRef('${scriptRef.ref}')` | ||
| ) | ||
|
|
||
| fixes.push(replaceFunctionFix) | ||
|
|
||
| if (!missingImportChecked) { | ||
| missingImportChecked = true | ||
|
|
||
| const missingImportFix = addUseTemplateRefImport( | ||
| context, | ||
| fixer | ||
| ) | ||
|
|
||
| if (missingImportFix) { | ||
| fixes.push(missingImportFix) | ||
| } | ||
| } | ||
|
|
||
| return fixes |
There was a problem hiding this comment.
I think it's a little easier to understand (and shorter) without the fixes array:
| /** @type {Fix[]} */ | |
| const fixes = [] | |
| const replaceFunctionFix = fixer.replaceText( | |
| scriptRef.node, | |
| `useTemplateRef('${scriptRef.ref}')` | |
| ) | |
| fixes.push(replaceFunctionFix) | |
| if (!missingImportChecked) { | |
| missingImportChecked = true | |
| const missingImportFix = addUseTemplateRefImport( | |
| context, | |
| fixer | |
| ) | |
| if (missingImportFix) { | |
| fixes.push(missingImportFix) | |
| } | |
| } | |
| return fixes | |
| const replaceFunctionFix = fixer.replaceText( | |
| scriptRef.node, | |
| `useTemplateRef('${scriptRef.ref}')` | |
| ) | |
| if (!missingImportChecked) { | |
| missingImportChecked = true | |
| const missingImportFix = addUseTemplateRefImport( | |
| context, | |
| fixer | |
| ) | |
| if (missingImportFix) { | |
| return [replaceFunctionFix, missingImportFix] | |
| } | |
| } | |
| return replaceFunctionFix |
# Conflicts: # docs/rules/index.md # tests/lib/rules/prefer-use-template-ref.js
|
Addresses #2554 (comment)